import {
  LockOutlined,
  MobileOutlined,
} from '@ant-design/icons';
import {
  LoginFormPage, ProConfigProvider,
  ProFormCaptcha,
  ProFormText,
} from '@ant-design/pro-components';
import { message, theme } from 'antd';
import { useNavigate } from 'umi';

import { useModel } from "umi";

import services from '@/services/auth';

const { sendLoginSmsCode, loginBySmsCode } =
  services.AuthController;


const doLoginBySmsCode = async (mobile: string, smsCode: string) => {
  try {
    await loginBySmsCode({
      'mobile': mobile,
      'smsCode': smsCode
    });
    message.success('登录成功');
    return true;
  } catch (error) {
    message.error('登录失败');
    return false;
  }
};

const doSendLoginSmsCode = async (mobile: string) => {
  try {
    await sendLoginSmsCode({
      'mobile': mobile
    });
    message.success('验证码发送成功');
    return true;
  } catch (error) {
    message.error('验证码发送失败！');
    return false;
  }
};


const Page = () => {

  const { token } = theme.useToken();

  const navigate = useNavigate();

  const { setInitialState } = useModel("@@initialState");

  const doLogin = async () => {
    setInitialState({
      'username': 'jianglei.cui'
    })
    navigate("/home", { replace: true });
  }

  return (
    <div
      style={{
        backgroundColor: 'white',
        height: '100vh',
      }}
    >
      <LoginFormPage
        backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
        backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
        title="悦咖音乐工作室"
        containerStyle={{
          backgroundColor: 'rgba(0, 0, 0,0.65)',
          backdropFilter: 'blur(4px)',
        }}
        subTitle="用心做音乐, 用爱去培育"
        onFinish={async (data) => {
          const { mobile, captcha } = data;
          const result = await doLoginBySmsCode(mobile, captcha);
          if (result) {
            doLogin();
          }
        }}
      >
        <>
          <ProFormText
            fieldProps={{
              size: 'large',
              prefix: (
                <MobileOutlined
                  style={{
                    color: token.colorText,
                  }}
                  className={'prefixIcon'}
                />
              ),
            }}
            name="mobile"
            placeholder={'手机号'}
            rules={[
              {
                required: true,
                message: '请输入手机号！',
              },
              {
                pattern: /^1\d{10}$/,
                message: '手机号格式错误！',
              },
            ]}
          />
          <ProFormCaptcha
            fieldProps={{
              size: 'large',
              prefix: (
                <LockOutlined
                  style={{
                    color: token.colorText,
                  }}
                  className={'prefixIcon'}
                />
              ),
            }}
            captchaProps={{
              size: 'large',
            }}
            placeholder={'请输入验证码'}
            captchaTextRender={(timing, count) => {
              if (timing) {
                return `${count} ${'获取验证码'}`;
              }
              return '获取验证码';
            }}
            phoneName="mobile"
            name="captcha"
            rules={[
              {
                required: true,
                message: '请输入验证码！',
              },
            ]}
            onGetCaptcha={async (mobile) => {
              doSendLoginSmsCode(mobile);
            }}
          />
        </>

      </LoginFormPage>
    </div>
  );
};

export default () => {
  return (
    <ProConfigProvider dark>
      <Page />
    </ProConfigProvider>
  );
};
